<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >

    <a-spin :spinning="confirmLoading">
      <a-comment>
        <a slot="author">{{model.memberNickName}}</a>
        <a-avatar
          slot="avatar"
          :src="model.memberIcon"
          :alt="model.memberNickName"
        />
        <p slot="content">
          {{model.content}}

          <!--<template v-for="(data,index) in dataSource">
            <div style="float: left;width:150px;height:150px;margin-right: 10px;margin: 0 8px 8px 0;" :key="index">
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;" :src="data" preview="index">
              </div>
            </div>
          </template>-->

        </p>
        <template slot="actions">
          <span key="comment-basic-like">
            <a-tooltip title="赞">
              <a-icon type="like" :theme="'filled'"/>
            </a-tooltip>
            <span style="padding-left: '8px';cursor: 'auto'">
              {{ model.likeCount }}
            </span>
          </span>
          <span key="comment-basic-reply-to">
            <a-switch size="small" :checked="(model.reviewStatus === 2)" @change="handleCommentConfirm(model)"/>
          </span>
        </template>

        <a-list
          v-if="replays.length"
          :dataSource="replays"
          itemLayout="horizontal"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-comment
              :author="item.memberNickName"
              :avatar="item.memberIcon"
              :content="item.content"
              :datetime="item.createTime"
            >
              <template slot="actions">
                <span key="comment-basic-like">
                  <a-tooltip title="赞">
                    <a-icon type="like" :theme="'filled'"/>
                  </a-tooltip>
                  <span style="padding-left: '8px';cursor: 'auto'">
                    {{ item.likeCount }}
                  </span>
                </span>
                <span key="comment-basic-reply-to">
                  <a-switch size="small" :checked="(item.reviewStatus === 2)" @change="handleConfirm(item)"/>
                </span>
              </template>
            </a-comment>
          </a-list-item>
        </a-list>
      </a-comment>

      <a-comment>
        <a-avatar
          slot="avatar"
          src="https://pic.flyco.net.cn/mall/newfeike.jpg"
          alt="飞科客服"
        />
        <div slot="content">
          <a-form :form="form">
            <a-form-item>
              <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
            </a-form-item>
            <a-form-item align="right">
              <a-button htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
                回复
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-comment>

    </a-spin>
  </a-drawer>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'

  export default {
    name: 'CmsArticleV2CommentReplyModal',
    data() {
      return {
        title: '评论',
        visible: false,
        submitting: false,
        value: '',
        moment,
        model: {},
        replays: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        dataSource: [],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        url: {
          add: '/cms/cmsArticleV2/addCmsArticleV2CommentReply',
          edit: '/cms/cmsArticleV2/editCmsArticleV2CommentReply',
          editCommentStatus: '/cms/cmsArticleV2/editCmsArticleV2CommentStatus',
          editStatus: '/cms/cmsArticleV2/editCmsArticleV2CommentReplyStatus',
          queryListByCommentId: '/cms/cmsArticleV2/queryListByCommentId'
        }
      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true

        /*if (this.model.pics != null && this.model.pics != '' && this.model.pics != undefined) {
          this.dataSource = this.model.pics.toString().split(',')
        } else {
          this.dataSource = []
        }*/

        this.$nextTick(() => {
          //this.form.setFieldsValue(pick(this.model, 'commentId', 'memberNickName', 'memberIcon', 'content', 'type'))
          //时间格式化
        })

        if (this.model.id) {
          console.log(this.model.id)
          this.loadReplayData()
        }
      },
      loadReplayData() {
        var params = { id: this.model.id }
        this.loading = true
        this.replays = []
        getAction(this.url.queryListByCommentId, params).then((res) => {
          if (res.success) {
            this.replays = res.result
            if (this.replays.length) {
              this.value = ''
            } else {
              this.value = '最尊敬的用户您好：您的鼓励和支持，是我们飞科最好的前进动力。感谢您对飞科官网的支持！'
            }
          }
          this.loading = false
        })
      },
      handleChange(e) {
        this.value = e.target.value
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleSubmit() {
        if (!this.value) {
          return
        }
        this.submitting = true
        let formData = {}
        formData.content = this.value
        formData.commentId = this.model.id
        //时间格式化
        httpAction(this.url.add, formData, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.value = ''
            this.loadReplayData()
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.submitting = false
        })
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            //时间格式化

            console.log(formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }
        })
      },
      handleCancel() {
        this.close()
      },
      handleConfirm (record) {
        console.log(record.reviewStatus)
        if (record.reviewStatus != 2) {
          record.reviewStatus = 2;
        } else {
          record.reviewStatus = 3;
        }
        let editObj = {};
        editObj.id = record.id;
        editObj.reviewStatus = record.reviewStatus;
        this.handleConfirmEdit(editObj);

      },
      handleConfirmEdit(record) {
        const that = this;
        that.confirmLoading = true;
        console.log(record)
        httpAction(this.url.editStatus,record,'put').then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.$emit('ok');
          }else{
            that.$message.warning(res.message);
            if (record.status == 2)
            {
              record.status = 1;
            } else {
              record.status = 2;
            }
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      },
      handleCommentConfirm(record) {
        console.log(record.reviewStatus)
        if (record.reviewStatus != 2) {
          record.reviewStatus = 2;
        } else {
          record.reviewStatus = 3;
        }
        let editObj = {};
        editObj.id = record.id;
        editObj.reviewStatus = record.reviewStatus;
        this.handleCommentConfirmEdit(editObj);

      },
      handleCommentConfirmEdit(record) {
        const that = this;
        that.confirmLoading = true;
        console.log(record)
        httpAction(this.url.editCommentStatus,record,'put').then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.$emit('ok');
          }else{
            that.$message.warning(res.message);
            if (record.status == 2)
            {
              record.status = 1;
            } else {
              record.status = 2;
            }
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      },


    }
  }
</script>

<style lang="less" scoped>

</style>